<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: 'echarts',
        props: ['id', 'scope'],
        mounted () {
            this.renderChart();
        },
        watch: {
            "scope": function () {
                this.renderChart();
            }
        },
        methods: {
            renderChart () {
                const currentTime = new Date();
                const year = currentTime.getFullYear();
                const month = currentTime.getMonth() + 1;
                const day = currentTime.getDate();

                // 从现在开始，倒退7个15分钟结点
                const realsArr = [];
                // 向上取整到最近的15分钟
                let now = new Date();
                const quarterHour = Math.floor(now.getMinutes() / 15) * 15;
                now.setMinutes(quarterHour);
                now.setSeconds(0); // 确保秒数为0
                now.setMilliseconds(0); // 确保毫秒数为0

                // 从这个结点开始，往前推count-1个15分钟间隔
                for (let i = 0; i < 12; i++) {
                    // 格式化时间为 yyyy-MM-dd HH:mm
                    const formattedTime =
                        // String(now.getDate()).padStart(2, '0') + '日' +
                        String(now.getHours()).padStart(2, '0') + ':' +
                        String(now.getMinutes()).padStart(2, '0');

                    realsArr.push(formattedTime);
                    now.setMinutes(now.getMinutes() - 15);
                }

                // 从今天开始，倒退12天
                let daysArr = [];
                for (let i = 0; i < 12; i++) {
                    let date = new Date(currentTime);
                    date.setDate(currentTime.getDate() - i);

                    const formattedDate = String(date.getMonth() + 1).padStart(2, '0') + '-' +
                        String(date.getDate()).padStart(2, '0');

                    daysArr.push(formattedDate);
                }

                // 从本月开始，倒退12个月
                const monthsArr = [];
                for (let i = 0; i < 12; i++) {
                    let yy = year;
                    let mm = month - i;

                    // 处理跨年情况
                    if (mm <= 0) {
                        mm += 12;
                        yy -= 1;
                    }

                    // 格式化并存储年月
                    const formattedMonth = `${String(yy).slice(-2)}-${String(mm).padStart(2, '0')}`;
                    monthsArr.push(formattedMonth);
                }

                const option_real = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '2%',
                        bottom: '15%',
                        containLabel: true
                    },
                    legend: {
                        data: ['实际', '实际同比'],
                        top: 16,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: realsArr.reverse(),
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '单位：KWh',
                            position: 'left',
                            axisLabel: {
                                color: 'rgba(255, 255, 255, 0.8)' // 使用半透明的白色
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#666',
                                },
                            },
                            axisLabel: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        },
                        {
                            type: 'value',
                            name: '单位%',
                            position: 'right',
                            axisLabel: {
                                color: '#fff'
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#666',
                                },
                            },
                            axisLabel: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        }
                    ],
                    series: [
                        {
                            name: '实际',
                            type: 'bar',
                            barWidth: 22,
                            label: {
                                show: false,
                                color: '#fff'
                            },
                            data: [200, 100, 150, 250, 200, 100, 150, 250, 200, 100, 150, 250]
                        },
                        {
                            name: '实际同比',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.1)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1887FF' // 设置线条颜色
                            },
                            data: [80, 60, 80, 100, 80, 60, 80, 100, 80, 60, 80, 100]
                        },
                    ]
                };

                const option_day = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '2%',
                        bottom: '15%',
                        containLabel: true
                    },
                    legend: {
                        data: ['实际', '预测', '实际同比', '预测同比'],
                        top: 16,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: daysArr.reverse(),
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '单位：KWh',
                            position: 'left',
                            axisLabel: {
                                color: 'rgba(255, 255, 255, 0.8)' // 使用半透明的白色
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#666',
                                },
                            },
                            axisLabel: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        },
                        {
                            type: 'value',
                            name: '单位%',
                            position: 'right',
                            axisLabel: {
                                color: '#fff'
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#666',
                                },
                            },
                            axisLabel: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        }
                    ],
                    series: [
                        {
                            name: '实际',
                            type: 'bar',
                            stack: '总量',
                            barWidth: 22,
                            label: {
                                show: false,
                                color: '#fff'
                            },

                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#b39452' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#95672c' // 100% 处的颜色
                                    }],
                                    global: false
                                }
                            },
                            data: [2150, 1800, 1590, 2100, 2050, 1550, 1500, 2200, 2000, 1200, 1750, 2150]
                        },

                        {
                            name: '预测',
                            type: 'bar',
                            stack: '总量',
                            barWidth: 22,
                            label: {
                                show: false
                            },
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#1887FF' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#416491' // 100% 处的颜色
                                    }],
                                    global: false
                                }
                            },
                            data: [2050, 2000, 1600, 2000, 2150, 1750, 1650, 2000, 2050, 1400, 1800, 2000]
                        },
                        {
                            name: '实际同比',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.1)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1887FF' // 设置线条颜色
                            },
                            data: [108, 79, 102, 96, 104, 106, 97, 99, 89, 101, 102, 95]
                        },
                        {
                            name: '预测同比',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.2)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1FD7B6' // 设置线条颜色
                            },
                            data: [102, 94, 108, 90, 96, 105, 101, 110, 102, 94, 108, 97]
                        }
                    ]
                };

                const option_month = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '2%',
                        bottom: '15%',
                        containLabel: true
                    },
                    legend: {
                        data: ['实际', '计划', '预测', '实际同比', '计划同比', '预测同比'],
                        top: 16,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: monthsArr.reverse(),
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '单位：KWh',
                            position: 'left',
                            axisLabel: {
                                color: 'rgba(255, 255, 255, 0.8)' // 使用半透明的白色
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#666',
                                },
                            },
                            axisLabel: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        },
                        {
                            type: 'value',
                            name: '单位%',
                            position: 'right',
                            axisLabel: {
                                color: '#fff'
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#666',
                                },
                            },
                            axisLabel: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        }
                    ],
                    series: [
                        {
                            name: '实际',
                            type: 'bar',
                            stack: '总量',
                            barWidth: 22,
                            label: {
                                show: false,
                                color: '#fff'
                            },

                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#b39452' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#95672c' // 100% 处的颜色
                                    }],
                                    global: false
                                }
                            },
                            data: [2000, 1000, 1500, 2500, 2000, 1000, 1500, 2500, 2000, 1000, 1500, 2500]
                        },
                        {
                            name: '计划',
                            type: 'bar',
                            stack: '总量',
                            barWidth: 22,
                            label: {
                                show: false
                            },

                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#1FD7B6' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#408475' // 100% 处的颜色
                                    }],
                                    global: false
                                }
                            },
                            data: [1500, 1000, 1500, 2000, 1500, 1000, 1500, 2000, 1500, 1000, 1500, 2000]
                        },
                        {
                            name: '预测',
                            type: 'bar',
                            stack: '总量',
                            barWidth: 22,
                            label: {
                                show: false
                            },
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#1887FF' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#416491' // 100% 处的颜色
                                    }],
                                    global: false
                                }
                            },
                            data: [1000, 1000, 1500, 2000, 1000, 1000, 1500, 2000, 1000, 1000, 1500, 2000]
                        },
                        {
                            name: '实际同比',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.1)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1887FF' // 设置线条颜色
                            },
                            data: [80, 60, 80, 100, 80, 60, 80, 100, 80, 60, 80, 100]
                        },
                        {
                            name: '计划同比',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.2)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#FF9E27' // 设置线条颜色
                            },
                            data: [60, 40, 60, 80, 60, 40, 60, 80, 60, 40, 60, 80]
                        },
                        {
                            name: '预测同比',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.2)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1FD7B6' // 设置线条颜色
                            },
                            data: [100, 240, 160, 180, 50, 120, 90, 20, 110, 50, 90, 280]
                        }
                    ]
                };

                const option_year = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '2%',
                        bottom: '15%',
                        containLabel: true
                    },
                    legend: {
                        data: ['实际', '预测', '实际同比', '预测同比'],
                        top: 16,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: [year - 6, year - 5, year - 4, year - 3, year - 2, year - 1, year],
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '单位：KWh',
                            position: 'left',
                            axisLabel: {
                                color: 'rgba(255, 255, 255, 0.8)' // 使用半透明的白色
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#666',
                                },
                            },
                            axisLabel: {
                                fontSize: 12,
                                color: '#fff',
                            }
                        },
                        {
                            type: 'value',
                            name: '单位%',
                            position: 'right',
                            axisLabel: {
                                color: '#fff'
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#666',
                                },
                            },
                            axisLabel: {
                                fontSize: 12,
                                color: '#fff',
                            }
                        }
                    ],
                    series: [
                        {
                            name: '实际',
                            type: 'bar',
                            stack: '总量',
                            barWidth: 22,
                            label: {
                                show: false,
                                color: '#fff'
                            },

                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#b39452' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#95672c' // 100% 处的颜色
                                    }],
                                    global: false
                                }
                            },
                            data: [1550, 1500, 2200, 2000, 1200, 1750, 2150]
                        },
                        {
                            name: '预测',
                            type: 'bar',
                            stack: '总量',
                            barWidth: 22,
                            label: {
                                show: false
                            },
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#1887FF' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#416491' // 100% 处的颜色
                                    }],
                                    global: false
                                }
                            },
                            data: [1750, 1650, 2000, 2050, 1400, 1800, 2000]
                        },
                        {
                            name: '实际同比',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.1)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1887FF' // 设置线条颜色
                            },
                            data: [106, 97, 99, 89, 101, 102, 95]
                        },
                        {
                            name: '预测同比',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.2)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1FD7B6' // 设置线条颜色
                            },
                            data: [105, 101, 110, 102, 94, 108, 97]
                        }
                    ]
                };

                var myChart = echarts.init(document.getElementById(this.id))
                myChart.clear();
                if (this.scope == "date") {
                    myChart.setOption(option_day);
                } else if (this.scope == "month") {
                    myChart.setOption(option_month);
                } else if (this.scope == "year") {
                    myChart.setOption(option_year);
                } else {
                    myChart.setOption(option_real);
                }
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    };
</script>

<style scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>